<template>
  <!-- 导航栏 -->
  <tui-navigation-bar splitLine @init="initNavigation" :title="projectTitle">
    <view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
      <tui-icon name="arrowleft" color="#000" @click="back"></tui-icon>
    </view>
  </tui-navigation-bar>
  <!-- 导航栏占位符，防止内容塌陷 -->
  <view :style="{ height: navBarHeight+'px' }"></view>
  <!-- 轮播图 -->
  <view class="tui-banner-swiper">
    <swiper class="tui-banner__height" @change="bannerChange" circular :indicator-dots="false" autoplay :interval="4000"
      :duration="150">
      <block v-for="(item,index) in background" :key="index">
        <swiper-item>
          <view class="tui-swiper-item tui-banner__height" :class="[item]">内容</view>
        </swiper-item>
      </block>
    </swiper>
    <tui-swiper-dot :type="1" :count="count" :current="current"></tui-swiper-dot>
  </view>
  <tui-grid>
    <block v-for="(item,index) in MenuList" :key="index">
      <tui-grid-item :cell="4" @click="detail(index)">
        <view class="tui-grid-icon">
          <tui-icon name="calendar"></tui-icon>
        </view>
        <text class="tui-grid-label">{{item.name}}</text>
      </tui-grid-item>
    </block>
  </tui-grid>
</template>

<script setup lang="ts">
  import { ref, } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app'
  const projectTitle = ref('')
  const MenuList = ref([])
  const background = ref(['tui-bg__primary', 'tui-bg__green', 'tui-bg__white'])
  const current = ref(0)
  const count = ref(0)
  const top = ref(0)
  const navBarHeight =uni.getStorageSync('systemInfo').statusBarHeight+46

  const initNavigation = (e) => {
    top.value = e.top;
  }
  const back = () => {
    uni.navigateTo({
      url: '/pages/projectInProgress/projectInProgress'
    });
  }

  const bannerChange = (e) => {
    current.value = e.detail.current
  }

  onLoad(() => {
    count.value = background.value.length;
    setTimeout(()=>{
      MenuList.value = uni.getStorageSync('userRoleInProject').modules.map(e => ({ ...e, name: e.moduleName, url: e.url }))
    },100)
    
    console.log(MenuList.value);
  })

  onShow(() => {
    projectTitle.value = uni.getStorageSync('projectInfo').projectName
    let token = uni.getStorageSync('token')
    if (!token) {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    }
  });

  const detail = (index) => {
    uni.navigateTo({
      url: MenuList.value[index].url
    })
  }
</script>

<style lang="scss" scoped>
  .tui-grid-icon {
    width: 64rpx;
    height: 64rpx;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
  }

  .tui-header-icon {
    width: 100%;
    position: fixed;
    top: 0;
    padding: 0 12rpx;
    display: flex;
    align-items: center;
    height: 32px;
    transform: translateZ(0);
    z-index: 99999;
    box-sizing: border-box;
  }

  .tui-grid-label {
    display: block;
    text-align: center;
    font-weight: 400;
    color: #333;
    font-size: 28rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10rpx;
  }

  .tui-banner-swiper {
    position: relative;
  }

  .tui-swiper-item {
    width: 100%;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34rpx;
    font-weight: 600;
  }

  .tui-banner__height {
    height: 360rpx;
  }

  .tui-bg__primary {
    background-color: rgba(0, 0, 0, .8);
  }

  .tui-bg__green {
    background-color: #07c160;
  }

  .tui-bg__white {
    background-color: #F2F2F2;
    color: #000;
  }
</style>